<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>props基本使用</title>
</head>
<body>
<div id="app"></div>
<script src="../lib/babel.min.js"></script>
<script src="../lib/react.development.js"></script>
<script src="../lib/react-dom.development.js"></script>
<script src="../lib/prop-types.js"></script>
<script type="text/babel">
  class Person extends React.Component {
    render() {
      return (
        <div>
          {
            this.props.people.map(person => {
              return (
                <ul key={person.name + person.age}>
                  <li>{person.name}</li>
                  <li>{person.gender}</li>
                  <li>{person.age}</li>
                </ul>
              )
            })
          }
        </div>
      )
    }
  }

  // 属性限制
  Person.propTypes = {
    people: PropTypes.array.isRequired,
    test: PropTypes.func
  }
  // 属性默认值
  Person.defaultProps = {
    people: [],
    test: () => {
      console.log('666')
    }
  }

  const people = [{name: 'Samuel', gender: 'male', age: 26}]
  ReactDOM.render(<Person people={people}/>, document.querySelector('#app'));
</script>
</body>
</html>
